<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>管理</el-breadcrumb-item>
			<el-breadcrumb-item>图书管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 搜索与添加区域 -->
			<el-row :gutter=20>
				<el-col :span="7">
					<el-input placeholder="请输入内容" class="input-with-select" v-model='queryInfo.query' clearable
						@clear="getBookList()">
						<el-button slot="append" icon="el-icon-search" @click="getBookList()"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addialogVisible = true">添加图书</el-button>
				</el-col>
			</el-row>
			<el-table :data="booklist" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="书号" prop="id"></el-table-column>
				<el-table-column label="封面" width="180">
					<template slot-scope='scope'>
						<img v-bind:src="require('@/assets/'+scope.row.name+'.jpg')" @error="require('@/assets/111.jpg')" style="height: 125px; width: 85px;" />
						
					</template>
				</el-table-column>
				<el-table-column label="书名" prop="name"></el-table-column>
				<el-table-column label="类别" prop="category"></el-table-column>
				<el-table-column label="价格" prop="price"></el-table-column>
				<el-table-column label="作者" prop="author"></el-table-column>
				<el-table-column label="藏馆地址" prop="address"></el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope='scope'>
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="update(scope)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="delBook(scope)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>

		<!-- 对话框 -->
		<el-dialog title="添加图书" :visible.sync="addialogVisible" width="50%">
			<el-form label-position='right' :model="addBook" :rules="addFormrules" ref="addFormref" label-width="70px"
				:inline='true'>
				<el-form-item label="书名" prop="name" style="width: 300px;">
					<el-input v-model="addBook.book.name"></el-input>
				</el-form-item>
				<el-form-item label="作者" prop="author" style="width: 300px;">
					<el-input v-model="addBook.book.author"></el-input>
				</el-form-item>
				<el-form-item label="类别" prop="category" style="width: 300px;">
					<el-select v-model="addBook.book.category" placeholder="请选择" style="width: 100px;">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="价格" prop="price" style="width: 300px;">
					<el-input v-model="addBook.book.price"></el-input>
				</el-form-item>
				<el-form-item label="出版社" prop="press" style="width: 300px;">
					<el-input v-model="addBook.book.press"></el-input>
				</el-form-item>
				<el-form-item label="藏书地址" prop="address" style="width: 300px;">
					<el-input v-model="addBook.book.address"></el-input>
				</el-form-item>
				<el-form-item label="出版日期" prop="ctime">
					<el-date-picker type="date" placeholder="选择日期" v-model="addBook.book.ctime" style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="本数" prop="x">
					<el-input v-model="addBook.x"></el-input>
				</el-form-item>
				<el-form-item label="简介" prop="introduce">
					<el-input v-model="addBook.book.introduce"></el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="pop=true">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改图书对话框 -->
		<el-dialog title="修改图书" :visible.sync="updataialogVisible" width="50%">
			<el-form label-position='right' :model="book" ref="addFormref" label-width="70px" :inline='true'>
				<el-form-item label="书名" prop="name" style="width: 300px;">
					<el-input v-model="book.name"></el-input>
				</el-form-item>
				<el-form-item label="作者" prop="author" style="width: 300px;">
					<el-input v-model="book.author"></el-input>
				</el-form-item>
				<el-form-item label="类别" prop="category" style="width: 300px;">
					<el-select v-model="book.category" placeholder="请选择" style="width: 100px;">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="价格" prop="price" style="width: 300px;">
					<el-input v-model="book.price"></el-input>
				</el-form-item>
				<el-form-item label="出版社" prop="press" style="width: 300px;">
					<el-input v-model="book.press"></el-input>
				</el-form-item>
				<el-form-item label="藏书地址" prop="address" style="width: 300px;">
					<el-input v-model="book.address"></el-input>
				</el-form-item>
				<el-form-item label="出版日期" prop="ctime">
					<el-date-picker type="date" placeholder="选择日期" v-model="book.ctime" style="width: 100%;">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="简介" prop="introduce">
					<el-input v-model="book.introduce"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="updataialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="up()">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 增加图片对话框 -->
		<el-dialog title="上传封面" :visible.sync="pop" width="50%">
			<el-upload class="upload-demo" ref="upload" action="http://localhost:8989/ok" :on-preview="handlePreview"
				:on-remove="handleRemove" :auto-upload="false" :limit="1">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确定</el-button>
				<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>

		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				img:"../assets/",
				value:".jpg",
				pop: false,
				// 获取用户列表的参数对象
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 2
				},
				options: [{
					value: '历史',
					label: '历史'
				}, {
					value: '科幻',
					label: '科幻'
				}, {
					value: '儿童',
					label: '儿童'
				}, {
					value: '青春',
					label: '青春'
				}, {
					value: '科普',
					label: '科普'
				}],
				x: 1,
				name: '',
				booklist: [],
				total: 0,
				addialogVisible: false,
				updataialogVisible: false,
				book: [],
				// 添加用户的表单数据
				addBook: {
					book: {
						name: '',
						id: '',
						address: '',
						category: '',
						price: '',
						press: '',
						author: '',
						ctime: '',
						exist: 0,
						Borrowtime: '',
						Borrow: 0,
						introduce: ''
					},
					x: 1
				},
				 fileList:[],
				//添加表单的验证规则
				addFormrules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, {
						min: 3,
						max: 10,
						message: '用户名长度在3到10位',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			submitUpload() {
				this.add();
				this.sub();
			},
			sub(){
				this.$refs.upload.submit();
				this.pop=false;
				this.getBookList();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			prev() {
				this.queryInfo.pagenum--;
				this.getBookList();
			},
			next() {
				this.queryInfo.pagenum++;
				this.getBookList();
			},
			up() {
				this.updataialogVisible = false;
				this.$http.post("http://localhost:8989/updata", this.book).then(res => {
					console.log(res);
					if (res.data.status != 0) {
						this.$message.success("修改成功");
						this.getBookList();
					} else {
						this.$message.error("增加失败请稍后重试");
					}

				}).catch(e => {
					console.log(e);
				})
			},
			update(scope) {
				this.book = scope.row;
				console.log(this.book);
				this.updataialogVisible = true;
			},
			add() {
				this.addialogVisible = false;
				this.addBook.book.Borrowtime = Date.now();
				this.$http.post("http://localhost:8989/addbook", this.addBook).then(res => {
					console.log(res);
					if (res.data.status != 0) {
						this.$message.success("增加成功  增加了" + res.data.status + "本");
						
						
					} else {
						this.$message.error("增加失败请稍后重试");
					}

				}).catch(e => {
					console.log(e);
				})

			},
			delBook(scope) {
				this.book = scope.row;
				console.log(this.book);
				this.$http.post("http://localhost:8989/dbook", this.book).then(res => {
					console.log(res);
					if (res.data.status === 200) {
						this.$message.success("删除成功");
						this.getBookList();
					}

				}).catch(e => {
					console.log(e);
				})
			},
			getBookList() {
				this.$http.post("http://localhost:8989/book", this.queryInfo).then(res => {
					console.log(res.data);
					if (res.data.status == 1) return this.$message.error("暂无相关图书");
					if (res.data.status !== 200) return this.$message.error("获取图书列表失败");
					this.booklist = res.data.data.list;
					console.log(this.booklist);
					this.total = res.data.total;
				}).catch(e => {
					console.log(e);
				})
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.queryInfo.pagesize = newSize;
				this.getBookList();
			},
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.queryInfo.pagenum = newPage;
				this.getBookList();
			},
			// 监听状态的改变
			userStateChangee(userinfo) {
				console.log(userinfo);
				this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`).then(res => {
					console.log(res);
					if (res.data.meta.status !== 200) {
						userinfo.mg_state = !userinfo.mg_state;
						return this.$message.error('更新用户状态失败');
					}
					this.$message.success('更新用户状态成功');
				});
			}
		},
		created() {

			this.getBookList();

		}

	}
</script>

<style scoped>
</style>
